<template>
  <div class="app-container">
    <hq-searchDown ref="hqSearchDown" :select-opts="selectOpts" @click="handleFilter" />
    <div class="filter-container">
      <span class="filter-title filter-item">身份所属</span>
      <k-select
        v-model="listQuery.identityBelong"
        class="filter-item right-item width-control"
        :select-params="dict.type.IDENTITY_TYPE"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      />
      <span class="filter-title filter-item">确权状态</span>
      <k-select
        v-model="listQuery.status"
        class="filter-item right-item width-control"
        :select-params="promotionUserRoleList"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      />
      <span class="filter-title filter-item">数字卡来源</span>
      <k-select
        v-model="listQuery.origin"
        class="filter-item right-item width-control"
        :select-params="payStatusList"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      />
      <span class="filter-title filter-item">发起时间</span>
      <k-date-picker v-model="timeValue" class="filter-item right-item" @hqchang="$refs.hqSearchDown.searchFun()" />
      <span class="filter-title filter-item">购买时间</span>
      <k-date-picker v-model="timeValueGet" class="filter-item right-item" @hqchang="$refs.hqSearchDown.searchFun()" />
      <span class="filter-title filter-item">确权时间</span>
      <k-date-picker v-model="drawTime" class="filter-item right-item" @hqchang="$refs.hqSearchDown.searchFun()" />

    </div>

    <div v-if="authorityHandle(417)" class="extract_data">
      <div class="extract_data_left">
        <p @click="getAuthentic">重新确权</p>
      </div>
    </div>

    <div v-else style="margin-top: 40px;" />

    <!--表格相关 -->
    <el-table
      fit
      :data="listData"
      border
      highlight-current-row
      style="width: 100%; border-radius: 8px; margin-top: 20px;"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
      @selection-change="handleSelectionChange"
      @sort-change="sortChange"
    >
      <el-table-column min-width="60px" type="selection" align="center" />
      <el-table-column prop="mobile" min-width="100px" label="用户账号" align="center" show-overflow-tooltip />
      <el-table-column prop="promotionUserRole" min-width="100px" label="身份所属" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ userRoleListRole(scope.row.promotionUserRole) }}
        </template>
      </el-table-column>
      <el-table-column prop="productName" min-width="100px" label="产品名称" align="center" show-overflow-tooltip />
      <el-table-column prop="qrCodeNum" min-width="100px" label="数字卡编号" align="center" show-overflow-tooltip />
      <el-table-column prop="price" min-width="100px" label="发行价" align="center" show-overflow-tooltip />

      <el-table-column prop="status" min-width="100px" label="确权状态" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ promotionUserRole(scope.row.status) }}
        </template>
      </el-table-column>

      <el-table-column prop="orderNo" min-width="100px" label="订单号" align="center" show-overflow-tooltip />
      <el-table-column prop="rucksackId" min-width="100px" label="背包Id" align="center" show-overflow-tooltip >
        <template slot-scope="scope">
          <div @click="rucksackClick(scope.row.rucksackId)">
            {{ scope.row.rucksackId }}

          </div>
        </template>
      </el-table-column>
      <el-table-column prop="origin" min-width="100px" label="数字卡来源" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ payStatus(scope.row.origin) }}
        </template>
      </el-table-column>
      <el-table-column prop="msg" min-width="110px" label="交易报错" align="center" show-overflow-tooltip />
      <el-table-column
        prop="payTime"
        min-width="120px"
        label="购买时间"
        align="center"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="createTime"
        min-width="120px"
        label="发起时间"
        align="center"
        sortable="custom"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ getTime_s(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="successTime"
        min-width="120px"
        label="确权时间"
        sortable="custom"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ getTime_s(scope.row.successTime) }}
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="$refs.hqSearchDown.searchFun(1)"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { confirmationRecord, confirmCard } from '@/api/data/data'
import { getTime_s } from '@/utils/auth'
import hqSearchDown from '@/components/hqSearchDown' // 下拉搜索
export default {
  components: {
    Pagination, hqSearchDown
  },
  dicts: ['IDENTITY_TYPE'],

  data() {
    return {
      // 下拉搜索项0
      selectOpts: [
        {
          label: '用户账号',
          rigth: true,
          value: 'mobile'
        },
        {
          label: '主播名称',
          value: 'anchorName'
        },
        {
          label: '数字卡名称',
          value: 'productName'
        },
        {
          label: '订单号',
          value: 'orderNo'
        },
        {
          label: '交易报错',
          value: 'errorMsg'
        },
        {
          label: '数字卡批次编号',
          value: 'qrCodeNum'
        }
      ],
      promotionUserRoleList: [{ label: '确权成功', value: 1 }, { label: '确权中', value: 0 }, { label: '确权失败', value: -1 }],
      payStatusList: [
        // { label: '分解', value: 1 },
        // { label: 'Card Battle', value: 2 },
        // { label: 'roll', value: 3 },
        // { label: '拆卡', value: 4 },
        // { label: '空头', value: 4 },
        // { label: '签到', value: 5 }
      ],
      errorCustomInfo: '',
      linkCount: '',
      checkFinished: false,
      drawType: 1,
      goodsId: -1,
      redrawDialogShow: false,
      manualCheckDialogShow: false,
      listData: [],
      multipleSelection: [],
      drawTime: '',
      timeValue: '',
      timeValueGet: '',

      totalRows: 0, // 分页组件--数据总条数
      totalData: 0,
      listQuery: {
        current: 1,
        size: 10,
        direction: 'desc',
        sort: 'createTime',
        userRole: undefined, // 身份所属",
        cardOrigin: undefined, // 卡片来源",
        status: undefined, // 确权状态",
        successTimes: undefined, // 接受时间检索",
        createTimes: undefined, // 接受时间检索",
        payTime:''
      },
      RemindStatus: 1
    }
  },

  watch: {
    drawTime(val) {
      // if (!this.drawTime) return
      this.listQuery.successTimes = this.drawTime ? this.drawTime[0] + ',' + this.drawTime[1] : ''
    },
    timeValue(val) {
      // if (!this.timeValue) return
      this.listQuery.createTimes = this.timeValue ? this.timeValue[0] + ',' + this.timeValue[1] : ''
    },
    timeValueGet(val) {
      this.listQuery.payTime = this.timeValueGet ? this.timeValueGet[0] + ',' + this.timeValueGet[1] : ''
    }

  },
  created() {
    this.loadData()
    this.getRemindStatus()
  },
  methods: {
    // 背包跳转
    rucksackClick(v) {
      this.$router.push({
        path: '/rootdatamanager/userbehavior-data/playerbagmanager/player-bags',
        query: {
          id: v
        }
      })
    },
    // 确权状态
    promotionUserRole(v) {
      let s = ''
      switch (v) {
        case 0:
          s = '确权中'
          break
        case 1:
          s = '确权成功'
          break
        case -1:
          s = '确权失败'
          break
        default:
          break
      }
      return s
    },
    // 确权状态
    userRoleListRole(v) {
      let s = ''
      switch (v) {
        case 1:
          s = '官方'
          break
        case 2:
          s = '主播'
          break
        case 3:
          s = '用户'
          break
        default:
          break
      }
      console.log(v, '/vvvv', s)
      return s
    },
    // 数字卡来源
    payStatus(v) {
      let s = ''
      switch (v) {
        case 0:
          s = '正常'
          break
        case 4:
          s = '拆卡'
          break
        case 5:
          s = '等级福利'
          break
        case 6:
          s = '智卡'
          break
        case 100:
          s = '空投'
          break
        case 2:
          s = 'Card Battle'
          break
        case 3:
          s = 'roll'
          break
        default:
          break
      }
      return s
    },
    getTime_s,


    loadData(v) {
      console.log(v, this.listQuery)
      confirmationRecord({ ...v, ...this.listQuery }).then(res => {
        const data = res.data
        this.listData = data.records
        this.totalRows = data.total
        this.totalData = 1
      })
    },
    getSummaries(param) {
      const {
        columns
      } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) { // 第一列
          sums[index] = '总计'
        } else if (column.property === 'tradePrice') {
          sums[index] = this.totalData
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    // 选择项发生变化时会触发该事件
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 表格的排序条件发生变化的时候会触发该事件
    sortChange(column, prop, order) {
      this.listQuery.sort = column.prop
      if (column.order === 'ascending') {
        this.listQuery.direction = 'asc'
      } else if (column.order === 'descending') {
        this.listQuery.direction = 'desc'
      }
      this.$refs.hqSearchDown.searchFun()
    },
    // 搜索查询事件
    handleFilter(v, type) {
      if (type !== 1) this.listQuery.current = 1
      this.loadData(v)
    },
    customGoodOp() {
      const selection = this.multipleSelection[0]
      const zbtMinPrice = selection.zbtMinPrice
      const skinsBusMinPrice = selection.skinsBusMinPrice
      this.goodsId = selection.id
      // this.drawType = parseFloat(zbtMinPrice) > parseFloat(skinsBusMinPrice) ? 2 : 1
      this.drawType = parseFloat(zbtMinPrice) > parseFloat(skinsBusMinPrice) ? 4 : 1
      this.redrawDialogShow = true
    },
    // 重新确权
    getAuthentic() {
      const _vue = this
      if (_vue.multipleSelection.length < 1) {
        this.$message.error('请至少选择一条数据进行确权！')
        return
      }
      console.log(_vue.multipleSelection);
      const selections = _vue.multipleSelection
      this.$confirm('确定要重新确权吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var ids = []
        for (var i = 0; i < selections.length; i++) {
          ids.push(selections[i].id)
        }
        confirmCard({
          'ids': ids
        }).then(res => {
          if (res.data.success) {
            this.$message.success('确权成功')
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }).catch(() => { })
    },
    handleCheckClose() {
      this.linkCount = ''
      this.manualCheckDialogShow = false
      this.checkFinished = false
    },
    linkClickCount(param) {
      this.linkCount = this.linkCount.concat(param)
      if (this.linkCount.includes('zbt') && this.linkCount.includes('bus')) {
        this.checkFinished = true
      }
    }

  }
}
</script>
<style lang="scss" scoped>
$menuText: #14162E; // 侧边栏字体颜色
$hoverColor: #1D143C; // 鼠标停留主色调浅色
$mainColor: #3b425d; // 主色调
.dialog-DivideZone {
	::v-deep.el-input__inner {
		width: 100px !important;
	}
	.price-input {
		width:100px;
	}
	.el-icon {
		&-circle-plus,
		&-remove {
			font-size: 22px;
			color: #3b425d;
			margin-left: 10px;
		}
	}
	ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		li {
			margin: 0 0 30px 0px;
			display: flex;
			flex-direction: row;
			align-items: center;
			.warning-title {
				font-size: 16px;
				color: $menuText;
				margin-right: 10px;
				margin-left: 20px;
			}
			i {
				color: #d1d5dd;
			}
			&.noTitle {
				&:before {
					display: block;
					width: 80px;
					content: '';
				}
			}
			&.hasTitle {
				&:before {
					font-weight: 700;
					color: $menuText;
					content: '特殊AI配置:';
				}
			}
		}
	}
}
.filter-container {
  width: 100%;
  height: 48px;
  line-height: 48px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }

  .width-control {
    width: 120px;
  }

  .kInput {
    position: absolute;
    right: 20px;
  }

  .filter-title {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    font-weight: 500;
    margin-right: 22px;
    color: #14162E;
  }

  .right-item {
    margin-right: 10px;
  }
}

.setting_dialog {
  ::v-deep .el-dialog__body {
    width: 600px;
  }

  ::v-deep .el-radio-button__inner {
    &:hover {
      color: $mainColor;
    }
  }

  .dialog-warningSetting {
    padding-top: 30px;
  }

  .form-modify {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 10px 80px;

    ::v-deep .el-input__inner {
      width: 200px;
    }
  }
}

.extract_data {
  height: 35px;
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 20px;
  box-sizing: border-box;

  .extract_data_left {
    display: flex;
    align-items: center;

    p {
      width: 100px;
      height: 35px;
      font-size: 14px;
      line-height: 35px;
      text-align: center;
      border-radius: 4px;
      cursor: pointer;
      background: #3b425d;
      color: #fff;
      margin-right: 10px;

    }
  }

  .right-box {
    .btn {
      display: inline-block;
      width: 100px;
      height: 35px;
      font-size: 14px;
      line-height: 35px;
      text-align: center;
      border-radius: 4px;
      background: #F8F7FB;
      margin-left: 40px;
      cursor: pointer;
    }
  }

}

.el-message-box {
  .el-button {
    border: 1px solid #3b425d;
    color: #3b425d;
    background-color: rgba($color: #3b425d, $alpha: .1);
  }
}

.redraw-contanier {
  padding: 80px;

  ::v-deep .el-radio__input.is-checked+.el-radio__label {
    color: $mainColor;
  }

  ::v-deep .el-radio__input.is-checked .el-radio__inner {
    border-color: $mainColor;
    background: $mainColor;
  }
}

.manual_dialog {

  .div_manualcheck {
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;

    a {
      color: $mainColor;
      margin-top: 10px
    }
  }

  ::v-deep .el-dialog__footer {
    text-align: center
  }

  ::v-deep .el-button--primary.is-disabled,
  .el-button--primary.is-disabled:active,
  .el-button--primary.is-disabled:focus,
  .el-button--primary.is-disabled:hover {
    color: #FFF;
    background-color: #1D143C;
    border-color: #1D143C;
  }
}
</style>

